<template>
  <div class="log-tree">
    <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
        <span class="custom-tree-node action" slot-scope="{ node, data }">
        <template v-if="node.isEdit">
            <!-- 字段条件新增表单 -->
            <params-input ref="paramsInputRef2" :dialogFormVisible="node.isEdit" @saveParamsChange="saveParamsChange" @cancelParams="cancelParams"/>
        </template>
        <span v-if="!node.isEdit" class="brother-showing text">{{ node.label}}</span>
        <span class="" v-show="!node.isEdit">
            <!-- 新增 -->
            <el-popover
            v-if="data.type !== 'operands'"
            popper-class="elPopover"
            placement="bottom"
            width="130"
            trigger="click"
            >
                <log-dropdown :options="dropData" @handleClick="handleAddClick" />
            <el-button slot="reference" type="text" @click="append(node, data)"><i class="el-icon-circle-plus-outline"></i></el-button>
            </el-popover>
            <!-- 编辑 -->
            <el-button
            v-if="data.type === 'operands'"
            type="text"
            slot="reference"
            @click="editText(node, data)"
            >
            <i class="el-icon-edit"></i>
            </el-button>
            <!-- 删除 -->
            <el-popconfirm
            placement="top"
            title="确定要删除这个条件吗？"
            @onConfirm="() => remove(node, data)"
            >
            <el-button
                type="text"
                slot="reference"
                >
                <i class="el-icon-delete"></i>
            </el-button>
            </el-popconfirm>
        </span>
        </span>
    </el-tree>
    <!-- 字段条件新增表单 -->
    <params-input ref="paramsInputRef" :secParams="filedData" :dialogFormVisible="dialogFormVisible" @saveParamsChange="saveParamsChange" @cancelParams="cancelParams"/>
  </div>
</template>

<script>
/* eslint-disable */
import LogDropdown from '@/components/cs-dropdown-menu'
import ParamsInput from '@/components/log-params-input'
import { selectLogicData } from '@/api/analysis/intelligent'
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    dropData: {
      type: Array,
      default: () => []
    },
    filedData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      currentTreeData: {},
      editData: {},
      dialogFormVisible: false,
      formInline: {
        left: '1',
        name: '11',
        right: ''
      },
      inputEdit: false
    }
  },
  components: {
    LogDropdown,
    ParamsInput
  },
  methods: {
    // 新增树子集
    append(node, data) {
      this.currentTreeData.node = node
      this.currentTreeData.data = data
    },
    // 确认新增
    handleAddClick(data) {
      // 逻辑运算时执行新增子数据操作
      if (data.type) {
        let id = new Date().getTime()
        const newChild = { id: id, label: data.label, type: data.type, children: [] }
        if (!this.currentTreeData.data.children) {
          this.$set(this.currentTreeData.data, 'children', [])
        }
        this.currentTreeData.data.children.push(newChild)
        if (data.type === 'operands') {
          const newOperands = {
            operbase: { ...data.operbase }
          }
          if (!this.currentTreeData.data.operands) {
            this.$set(this.currentTreeData.data, 'operands', [])
          }
          this.currentTreeData.data.operands.push(newOperands)
        }
      } else {
        if (data.value !== 1) {
            console.log(data)
          this.$nextTick(() => {
              console.log(this.$refs.paramsInputRef)
            this.$refs.paramsInputRef.init()
            this.dialogFormVisible = true
          })
        }
      }
    },
    // 字段条件数据添加
    saveParamsChange(data) {
      // let str = data.left + ' ' + data.name + ' ' + data.right
      let str = data.label
      const params = {
        label: str,
        type: 'operands',
        operbase: data.formInline
      }
      this.handleAddClick(params)
      this.dialogFormVisible = false
    },
    cancelParams(flag, isEdit) {
      // 判断是否是编辑时的取消
      if (isEdit) {
        this.$nextTick(() => {
          this.$set(this.editData.node, 'isEdit', false)
        })
      } else {
        this.dialogFormVisible = flag
      }
    },
    // 删除树的子集
    remove(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    // 编辑字段条件
    editText(node, data) {
      this.editData.node = node
      this.editData.data = data

      this.formInline.left = data.label.split(' ')[0]
      this.formInline.name = data.label.split(' ')[1]
      this.formInline.right = data.label.split(' ')[2]
      // 检测isEdit是否存在or是否为false
      if (!node.isEdit) {
        this.$set(node, 'isEdit', true)
        this.$refs.paramsInputRef[0].init(this.formInline)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.log-tree {
  span.text {
    margin-right: 20px;
  }
  i{
    margin: 0 5px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    padding-right: 8px;
  }
  .brother-showing {
    i {
      width: 16px;
    }
    .iconfont {
      font-size: 16px;
      vertical-align: baseline;
    }
  }
  .active {
    display: none;
  }
  .action:hover .active {
    display: block;
  }
}
.el-button+.el-button {
  margin: 0;
}
</style>
